<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/hiprint.css" rel="stylesheet" />
    <link href="css/print-lock.css" rel="stylesheet" />

    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./plugins/jquery.min.js"></script>
    <script src="../static/axios.js"></script>
    <style>
        .layout {
            display: flex !important;
        }

        .ModelClass {
            margin-left: 50px;
        }

        .ModelClass1 {
            margin-top: 20px;
        }

        #popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            width: 400px;
            height: 300px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        #popup-div {
            width: 100%;
            height: 15%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #popup-div2 {
            width: 100%;
            height: 15%;
            display: flex;
        }

        #close-button {
            width: 20%;
            text-align: left;
        }

        #popup h2,
        #popup p {
            margin-top: 0;
        }

        #close-button:hover {
            color: #0052a3;
            cursor: pointer;
        }

        /* 模态背景 */
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9998;
            display: none;
        }

        .modal-content {
            width: 300px;
        }

        .pStyle {
            width: 178px;
            height: 20px;
            background-color: #ccc;
            margin: 0;
        }

        #confirmDialog {
            background-color: white;
            border: 1px solid #ccc;
            padding: 20px;
            text-align: center;
            width: 500px;
            height: 150px;
            position: absolute;
            top: 10px;
            left: 36%;
            display: none;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }

        #confirmDialog p {
            color: red;
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 10px;
        }

        #confirmDialog button {
            background-color: #7da8ed;
            color: #fff;
            border: none;
            margin-right: 10px;
            cursor: pointer;
            width: 80px;
            height: 40px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }

        #confirmDialog button:last-child {
            background-color: #575454;
            box-shadow: 0px 0px 0px 0px;
        }

        #confirmDialog2 {
            background-color: white;
            border: 1px solid #ccc;
            padding: 20px;
            text-align: center;
            width: 500px;
            height: 150px;
            position: absolute;
            top: 10px;
            left: 36%;
            display: none;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }

        #confirmDialog2 p {
            color: red;
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 10px;
        }

        #confirmDialog2 button {
            background-color: #575454;
            box-shadow: 0px 0px 0px 0px;
        }

        #confirmDialog2 button:last-child {
            background-color: #7da8ed;
            color: #fff;
            border: none;
            margin-right: 10px;
            cursor: pointer;
            width: 80px;
            height: 40px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        }
    </style>

</head>

<body>
    <layout class="layout hinnn-layout hinnn-layout-has-sider height-100-per" style="background:#fff;">
        <content class="hinnn-layout-content" style="border-left:1px solid #e8e8e8;">
            <div class="container-fluid height-100-per print-content">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-9 col-md-10">
                                <div class="hiprint-toolbar" style="margin-top:15px;">
                                    <ul>
                                        <!-- <li>
                                            <a class="btn hiprint-toolbar-item "
                                                style="color: #fff;background-color: #d9534f;border-color: #d43f3a;"
                                                id="A4_preview">快速预览</a>
                                        </li> -->
                                        <!-- <li>
                                            <a id="A4_directPrint" class="btn hiprint-toolbar-item "
                                                style="color: #fff;background-color: #d9534f;border-color: #d43f3a;">打印</a>
                                        </li> -->
                                    </ul>
                                    <div style="clear:both;"></div>
                                </div>
                                <div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-top:20px;">

                                </div>

                                </textarea>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </content>
        <div class="ModelClass">
            <div class="ModelClass1">
                <p class="pStyle">机台号: </p><select style="width: 178px;height: 26px;" id="select"></select>
            </div>
            <div class="ModelClass1">
                <p class="pStyle">开始匹号: </p><input type="text" autocomplete="off" id="inptText2" disabled="disabled">
            </div>
            <div class="ModelClass1">
                <p class="pStyle">打印数量: </p><input type="text" autocomplete="off" id="inptText3">
            </div>
            <div class="ModelClass1">
                <p class="pStyle">结束匹号: </p><input type="text" autocomplete="off" id="inptText4" disabled="disabled">
            </div>
            <div class="ModelClass1">
                <p class="pStyle">织布单未打总数量: </p><input type="text" autocomplete="off" id="inptText5"
                    disabled="disabled">
            </div>
            <div class="ModelClass1">
                <a id="A4_directPrint" class="btn hiprint-toolbar-item "
                    style="color: #fff;background-color: #d9534f;border-color: #d43f3a;">打印</a>
            </div>
        </div>
    </layout>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="width: 825px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">打印预览</h4>
                </div>

                <div class="modal-body">
                    <button type="button" class="btn btn-danger" id="A4_printByHtml">打印</button>
                    <div class="prevViewDiv"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>

    <div id="confirmDialog">
        <p id="textP"></p>
        <button id="cancelBtn">取消</button>
        <button id="confirmBtn">确定</button>
    </div>


    <div id="confirmDialog2">
        <p id="textP2"></p>
        <button id="cancelBtn2">取消</button>
        <button id="confirmBtn2">确定</button>
    </div>
    <script src="custom_test/custom-etype-provider.js"></script>
    <script src="custom_test/custom-print-json.js"></script>
    <script src="custom_test/print-data.js"></script>
    <script src="polyfill.min.js"></script>
    <script src="plugins/jquery.minicolors.min.js"></script>
    <script src="plugins/JsBarcode.all.min.js"></script>
    <script src="plugins/qrcode.js"></script>
    <script src="hiprint.bundle.js"></script>
    <script src="plugins/jquery.hiwprint.js"></script>
    <script src="./css/bootstrap.min.css"></script>
    <script>
        var tokens = sessionStorage.getItem('USER-TOKEN-KEY')
        let baseURL
        let host = window.location.host
        let reg = /^localhost+/
        if (reg.test(host)) {
            baseURL = 'http://localhost:8222/api'
        } else {
            baseURL = '/api'
        }
        const service = axios.create({
            baseURL,
            timeout: 10 * 60 * 1000,
            withCredentials: true, // 跨域请求时发送cookie
        })
        service.interceptors.response.use((res) => {
            return res.data
        })
        var post = (op) => {
            return service.post(op.url,
                op.data, {
                headers: {
                    token: tokens
                }
            }
            )
        }
        var hiprintTemplate
        var printDatas
        var jbhIndex
        var printDatasList = []
        $(document).ready(function () {
            $("#popup").hide()
            $("#overlay").hide()
            const paramsString = window.location.search
            const searchParams = new URLSearchParams(paramsString)
            hiprint.init({
                providers: [new customElementTypeProvider()]
            })

            hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'))
            console.log('aaa', JSON.parse(JSON.parse(searchParams.get('modelData')).detail))
            hiprintTemplate = new hiprint.PrintTemplate({
                template: JSON.parse(JSON.parse(searchParams.get('modelData')).detail),
                settingContainer: '#PrintElementOptionSetting',
                paginationContainer: '.hiprint-printPagination'
            })
            hiprintTemplate.design('#hiprint-printTemplate')
            $('#A4_preview').click(function () {
                $('#myModal .modal-body .prevViewDiv').html(hiprintTemplate.getHtml(printDatasList))
                $('#myModal').modal('show')
            })
            $('#A4_directPrint').click(function () {
                if (Number($("#inptText2").val()) == 1 && Number(printDatas.pieceWeight) != 25) {
                    $("#textP2").html(`落布重量为${Number(printDatas.pieceWeight)}KG/匹，是否继续打印`)
                    $('#confirmDialog2').show()
                    $("#confirmBtn2").click(function () {
                        $('#confirmDialog2').hide()
                        post({
                            url: 'planSingle/clothfiy/add',
                            data: printDatasList
                        }).then((res) => {
                            if (res.code == 200) {
                                alert('数据返回成功不可撤销')
                                hiprintTemplate.print(printDatasList)
                                $('#select').val('')
                                $('#inptText2').val('')
                                $('#inptText3').val('')
                                $('#inptText4').val('')
                                $('#inptText5').val('')
                                setTimeout(() => {
                                    location.reload()
                                }, 2000)
                            }
                        })
                    })
                    $("#cancelBtn2").click(function () {
                        $('#confirmDialog2').hide()
                    })
                } else if (Number($("#inptText3").val()) + Number($("#inptText2").val()) - 1 > Number(printDatas.machinePieceNum)) {
                    // const isPOPan = confirm(`该生产单号已打印${Number($("#inptText2").val()) - 1}张布飞，该次打印已超生产单号分配匹数，是否继续打印`)
                    $("#textP").html(`该生产单号已打印${Number($("#inptText2").val()) - 1}张布飞，该次打印已超生产单号分配匹数，是否继续打印`)
                    $('#confirmDialog').show()
                    $("#confirmBtn").click(function () {
                        $('#confirmDialog').hide()
                        post({
                            url: 'planSingle/clothfiy/add',
                            data: printDatasList
                        }).then((res) => {
                            if (res.code == 200) {
                                alert('数据返回成功不可撤销')
                                hiprintTemplate.print(printDatasList)
                                $('#select').val('')
                                $('#inptText2').val('')
                                $('#inptText3').val('')
                                $('#inptText4').val('')
                                $('#inptText5').val('')
                                setTimeout(() => {
                                    location.reload()
                                }, 2000)
                            }
                        })
                    })
                    $("#cancelBtn").click(function () {
                        $('#confirmDialog').hide()
                    })
                } else {
                    post({
                        url: 'planSingle/clothfiy/add',
                        data: printDatasList
                    }).then((res) => {
                        if (res.code == 200) {
                            alert('数据返回成功不可撤销')
                            hiprintTemplate.print(printDatasList)
                            $('#select').val('')
                            $('#inptText2').val('')
                            $('#inptText3').val('')
                            $('#inptText4').val('')
                            $('#inptText5').val('')
                            setTimeout(() => {
                                location.reload()
                            }, 2000)
                        }
                    })
                }
            })
            $('#A4_printByHtml').click(function () {
                post({
                    url: 'planSingle/clothfiy/add',
                    data: printDatasList
                }).then((res) => {
                    if (res.code == 200) {
                        alert('数据返回成功不可撤销')
                        hiprintTemplate.printByHtml($('#myModal .modal-body .prevViewDiv'))
                        $('#select').val('')
                        $('#inptText2').val('')
                        $('#inptText3').val('')
                        $('#inptText4').val('')
                        $('#inptText5').val('')
                        setTimeout(() => {
                            location.reload()
                        }, 2000)
                    }
                })
            })
            $('#A4_getJson_toTextarea').click(function () {
                $('#A4_textarea_json').html(JSON.stringify(hiprintTemplate.getJson()))
                console.log(JSON.stringify(hiprintTemplate.getJson()))
                var text1 = $('#inptText1').val()
                var text2 = $('#inptText2').val()

            })
            $('#A4_getJson_toDesign').click(function () {
                hiprintTemplate = new hiprint.PrintTemplate({
                    template: JSON.parse($('#A4_textarea_json').val()),
                    settingContainer: '#PrintElementOptionSetting',
                    paginationContainer: '.hiprint-printPagination'
                })
                $('#hiprint-printTemplate').html('')
                hiprintTemplate.design('#hiprint-printTemplate')
            })
            $('#A4_getHtml_toTextarea').click(function () {
                $('#A4_textarea_html').val(hiprintTemplate.getHtml(printData)[0].outerHTML)
            })
            $("#close-button, #overlay").click(function () {
                $("#popup").hide()
                $("#overlay").hide()
            })
            const select = $('#select')
            select.focus(function () {
                select.html('')
                post({
                    url: 'planSingle/clothfiy/getMachineCodeList',
                    data: {
                        "planOrderCode": searchParams.get('jhd')
                    }
                }).then((res) => {
                    $.each(res.data, function (i, item) {
                        const option = $('<option>').text(item.machineCode)
                        select.append(option)
                    })
                })
            })
            select.blur(function () {
                const text = $(this).find('option:selected').text()
                post({
                    url: 'planSingle/clothfiy/getClothfiy',
                    data: [
                        {
                            planOrderCode: searchParams.get('jhd'),
                            machineCode: text
                        }
                    ]
                }).then((resz) => {
                    printDatas = resz.data[0]
                    $("#inptText2").val(resz.data[0].horseNo)
                    $("#inptText5").val(resz.data[0].noPrintClothNum)
                    jbhIndex = resz.data[0].machineGreyCode
                    printDatas['yarnBatch'] = ''
                    printDatas['brandName'] = ''
                    for (let item in printDatas) {
                        if (item == 'yarnList') {
                            //"brandName" 纱牌
                            //"yarnBatch" 纱批
                            printDatas['yarnList'].forEach(resc => {
                                if (resc.batch) {
                                    console.log(resc.batch)
                                    printDatas['yarnBatch'] += resc.batch + '\n'
                                    console.log(printDatas['yarnBatch'])
                                } else {
                                    printDatas['yarnBatch'] = ''
                                }
                                if (resc.yarnCard) {
                                    printDatas['brandName'] += resc.yarnCard + '\n'
                                    console.log(printDatas['brandName'])
                                } else {
                                    printDatas['brandName'] = ''
                                }
                            })
                        }
                    }
                    console.log(printDatas)
                    printDatas['drawnNeedleState'] = printDatas['drawnNeedleState'] == '0' ? '抽针' : printDatas['drawnNeedleState'] == '1' ? '圆筒' : ''
                    // printDatas['typeDate'] = (printDatas['typeDate'] == '0') ? '开幅' : printDatas['typeDate'] == '1' ? '不开幅' : ''
                    printDatas['differentiateState'] = printDatas['differentiateState'] ? printDatas['differentiateState'] : 4
                    printDatas['qrcode'] = '12345678789123456'
                    printDatas['barcode'] = '12345678789123456'
                })
            })
            $("#inptText3").blur(function () {
                post({
                    url: 'planSingle/clothfiy/getQRAndBarCode',
                    data: {
                        planOrderCode: searchParams.get('jhd'),
                        machineCode: select.val(),
                        startHorseNo: $('#inptText2').val(),
                        printNum: Number($("#inptText3").val())
                    }
                }).then((res) => {
                    printDatasList = []
                    $("#inptText4").val(Number($("#inptText3").val()) + Number($("#inptText2").val()) - 1)
                    for (let i = 0; i < Number($("#inptText3").val()); i++) {
                        printDatasList.push(JSON.parse(JSON.stringify(printDatas)))
                    }
                    let indexIN = $('#inptText2').val()
                    jbhIndex = printDatas.machineGreyCode
                    printDatasList.forEach((items, indexs) => {
                        items['qrcode'] = `${res.data[indexs].clothfiyCode}`//二
                        items['barcode'] = res.data[indexs].barCode//一
                        items['clothfiyCode'] = res.data[indexs].clothfiyCode//二
                        items['horseNo'] = (indexIN++) + ''
                        items['machineGreyCode'] = (jbhIndex++) + ''
                        items['endHouseNo'] = $("#inptText4").val()
                        delete items['id']
                        if (indexs == printDatasList.length - 1) {
                            items['isLastPrint'] = '****************'
                        }
                    })
                    console.log('printDatasList', printDatasList)
                })
            })

        })

        //调整纸张
        var setPaper = function (paperTypeOrWidth, height) {
            hiprintTemplate.setPaper(paperTypeOrWidth, height)
        }

        //旋转
        var rotatePaper = function () {
            hiprintTemplate.rotatePaper()
        }
        var clearTemplate = function () {
            hiprintTemplate.clear()
        }

        var selectTextClick = function () {
            $("#popup").show()
            $("#overlay").show()
        }

        var closeButton1 = function (e) {
            $('#qingSelectText').val(e.getAttribute("data-id"))
            $('#CsText').val(e.getAttribute("data-text"))
            $('.hiprint-option-item-submitBtn').click()
        }

    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#barcode_button_preview').click(function () {
                var barCodehiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse($('#textarea_barcode').val()) })

                var $html = barCodehiprintTemplate.getHtml([{ name: '黄山', barcode: '13234567' }, { name: '黄波', barcode: '1224567' }, { name: '黄磊', barcode: '1234567' }, { name: '黄磊', barcode: '1234567' }, { name: '古丽娜', barcode: '7654321' }])

                $('#myModal .modal-body .prevViewDiv').html($html)
                $('#myModal').modal('show')
            })

            $('#barcode_button_print').click(function () {
                var barCodehiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse($('#textarea_barcode').val()) })

                var $html = barCodehiprintTemplate.getHtml([{ name: '黄山', barcode: '13234567' }, { name: '黄波', barcode: '1224567' }, { name: '黄磊', barcode: '1234567' }, { name: '黄磊', barcode: '1234567' }, { name: '古丽娜', barcode: '7654321' }])
                barCodehiprintTemplate.printByHtml($html)

            })
        })
    </script>

</body>

</html>